<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>储值卡概览-鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--deer-tit-->
		<div class="deer-tit">
			<h3>储值卡</h3>
			<h4>概览</h4>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">
			<div class="card-store">
				<h4>实时数据，可能会有一两分钟的数据延迟情况</h4>
				<div class="card-num">
					<dl>
						<dt>总充值</dt>
						<dd>10,179,652.47</dd>
					</dl>
					<dl>
						<dt>总赠送</dt>
						<dd>-9,937,655.65</dd>
					</dl>
					<dl>
						<dt>总消费</dt>
						<dd>12,916.54</dd>
					</dl>
					<dl>
						<dt>总余额</dt>
						<dd>229,080.28</dd>
					</dl>
			</div>
			<div class="gas-border">
				<nav class="gas-nav">
					<dl day="1">今天</dl>
					<dl day="7">最近7天</dl>
					<dl day="30">最近30天</dl>
					<dl><input name="search_time" class="gas-text" type="text" placeholder="查询时间" id="search_time" value="" lay-key="1"></dl>
				</nav>
				<div class="card-num">
					<dl>
						<dt>充值人数</dt>
						<dd>4</dd>
					</dl>
					<dl>
						<dt>充值人数</dt>
						<dd>4</dd>
					</dl>
					<dl>
						<dt>消费次数</dt>
						<dd>4</dd>
					</dl>
					<dl>
						<dt>消费次数</dt>
						<dd>4</dd>
					</dl>
				</div>
				
				<div class="echarts_box" id="main2"></div>
				
		        <div class="echarts_box" id="main"></div>
		        
			</div>
		</div>
		<!--/deer-content-->
	</section>
	<!--js-->
		<aside>
			<script type="text/javascript" src="../layui/layui.js" ></script>
			<script type="text/javascript" src="../js/echarts.min.js" ></script>
			<script type="text/javascript">
				layui.use(['laydate','jquery'],function(){
					var $=layui.jquery
					var laydate=layui.laydate;
						laydate.render({
				        elem: '#search_time', //指定元素
				        range: '/',
				    });
				    //gas-nav样式切换
				    $('.gas-nav dl').eq(0).addClass('active').siblings().removeClass('active')
				    $('.gas-nav dl').bind('click',function(){
				    	$(this).addClass('active').siblings().removeClass('active')
				    })
				})
				
				 var Chart = echarts.init(document.getElementById('main2'));

			    option2 = {
			        color: ['#3398DB'],
			        tooltip : {
			            trigger: 'axis',
			            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			            }
			        },
			        grid: {
			            left: '3%',
			            right: '4%',
			            bottom: '3%',
			            containLabel: true
			        },
			        xAxis : [
			            {
			                type : 'category',
			                data :['充值人数', '充值次数', '消费次数'],
			                axisTick: {
			                    alignWithLabel: true
			                }
			            }
			        ],
			        yAxis : [
			            {
			                type : 'value'
			            }
			        ],
			        series : [
			            {
			                name:'',
			                type:'bar',
			                barWidth: '60%',
			                data:[4, 11, 67]
			            }
			        ]
			    };
			
			    Chart.setOption(option2);
			    //eChart配置 折线图
			    var myChart = echarts.init(document.getElementById('main'));
			    option = {
			        title: {
			            text: '',
			            left:'2%'
			        },
			        tooltip: {
			            trigger: 'axis'
			        },
			        legend: {
			            data:['充值人数', '充值次数', '消费次数']
			        },
			        grid: {
			            left: '3%',
			            right: '3%',
			            bottom: '3%',
			            containLabel: true
			        },
			        toolbox: {
			            left: '95%',
			            feature: {
			                saveAsImage: {}
			            }
			        },
			        xAxis: {
			            type: 'category',
			            boundaryGap: false,
			            data:['2018-01-06','2018-01-07','2018-01-08','2018-01-09','2018-01-10','2018-01-11','2018-01-12','2018-01-13','2018-01-14','2018-01-15','2018-01-16','2018-01-17','2018-01-18','2018-01-19','2018-01-20','2018-01-21','2018-01-22','2018-01-23','2018-01-24','2018-01-25','2018-01-26','2018-01-27','2018-01-28','2018-01-29','2018-01-30','2018-01-31','2018-02-01','2018-02-02','2018-02-03','2018-02-04']
			        },
			        yAxis: {
			            type: 'value'
			        },
			        series: [{"name":"\u5145\u503c\u4eba\u6570","type":"line","stack":"\u603b\u91cf","data":[0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0]},{"name":"\u5145\u503c\u6b21\u6570","type":"line","stack":"\u603b\u91cf","data":[0,4,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,1,0,2,2,0,0,0,0,0,0,0,0]},{"name":"\u6d88\u8d39\u6b21\u6570","type":"line","stack":"\u603b\u91cf","data":[0,1,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,3,3,2,27,7,3,14,3,0,2,0,0,0]}]    };
			    // 使用刚指定的配置项和数据显示图表。
			    myChart.setOption(option);
			</script>
		</aside>
		<!--/js-->
</body>
</html>